<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useEquipmentStore } from '@/stores/equipment'
import { useRentalStore } from '@/stores/rental'

const equipmentStore = useEquipmentStore()
const rentalStore = useRentalStore()

const totalIncome = ref(3240)

onMounted(async () => {
  try {
    await Promise.all([
      equipmentStore.fetchStatistics(),
      rentalStore.fetchStatistics()
    ])
  } catch (error) {
    console.error('加载统计数据失败:', error)
  }
})
</script>

<template>
  <div class="dashboard">
    <h1>设备租赁</h1>
    
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stat-icon equipment-total">
            <el-icon><Monitor /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-title">设备总数</div>
            <div class="stat-value">{{ equipmentStore.statistics.total }}</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stat-icon available">
            <el-icon><Check /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-title">可用设备</div>
            <div class="stat-value">{{ equipmentStore.statistics.available }}</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stat-icon rented">
            <el-icon><ShoppingCart /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-title">已租设备</div>
            <div class="stat-value">{{ equipmentStore.statistics.rented }}</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stat-icon maintenance">
            <el-icon><Close /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-title">维护中</div>
            <div class="stat-value">{{ equipmentStore.statistics.maintenance }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="rental-stats">
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stat-icon pending">
            <el-icon><Clock /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-title">当前租赁</div>
            <div class="stat-value">{{ rentalStore.statistics.pending }}</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stat-icon active">
            <el-icon><Check /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-title">已完成</div>
            <div class="stat-value">{{ rentalStore.statistics.completed }}</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stat-icon completed">
            <el-icon><Check /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-title">已归还</div>
            <div class="stat-value">{{ rentalStore.statistics.active }}</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stat-icon income">
            <el-icon><Money /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-title">总消费</div>
            <div class="stat-value">¥{{ totalIncome }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.dashboard {
  padding: 20px;
}

.dashboard h1 {
  margin-bottom: 30px;
  color: #303133;
}

.stats-row {
  margin-bottom: 30px;
}

.rental-stats {
  margin-bottom: 30px;
}

.stats-card {
  text-align: left;
  transition: transform 0.2s;
}

.stats-card:hover {
  transform: translateY(-2px);
}

.stats-card .el-card__body {
  padding: 20px;
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.stat-icon .el-icon {
  font-size: 24px;
  color: white;
}

.equipment-total {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.available {
  background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
}

.rented {
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
}

.maintenance {
  background: linear-gradient(135deg, #fa8c16 0%, #ffa940 100%);
}

.pending {
  background: linear-gradient(135deg, #722ed1 0%, #9254de 100%);
}

.active {
  background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
}

.completed {
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
}

.income {
  background: linear-gradient(135deg, #f759ab 0%, #ff85c0 100%);
}

.stat-content {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
}
</style>